<template>
	<view class="bg-gray1" style="min-height: 100vh;">
		<cu-custom :bgColor="'bg-'+theme.backgroundColor" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">申请退款订单</block>
		</cu-custom>
		<!-- 商城订单 -->
		<view class="order">
			<view v-for="(item,index) in orderList" :key="index" class="order_info" @click="jumpInfo(item.order)">
				<view class="flex">
					<image :src="item.itemList&&item.itemList[0].picUrl?item.itemList[0].picUrl:noPic" mode=""
						class="o_Img"></image>
					<view class="order_item">
						<view class="">
							<view class="text-black font-30 text-bold overflow-1">{{item.name}}</view>
							<view class="">
								<text class="text-gray3">商品名称：</text>
								<text v-if="item.itemList&&item.itemList.length">{{item.itemList[0].spuName}}</text>
							</view>
							<view class="margin-top-sm">
								<text class="text-gray3">订单编号：</text>
								<text>{{item.order.orderNo}}</text>
							</view>
							<view class="margin-top-sm">
								<text class="text-gray3">创建时间：</text>
								<text>{{item.order.createTime}}</text>
							</view>
						</view>
						<view class="flex align-center">
							<view class="order_status1"
								v-if="item.order&&(item.order.status == '1' || item.order.status == '2')">已付款</view>
							<view class="order_status2" v-if="item.order&&item.order.status == '3'">已完成</view>
							<view class="order_status3" v-if="item.order&&item.order.status == '-1'">已退款</view>
							<view class="margin-left-xs" v-if="item.itemList&&item.order&&item.order.status != '-1'">
								<view v-if="item.itemList[0].status=='1'" class="cu-tag round line-red">退款申请中</view>
								<view v-if="item.itemList[0].status=='12'" class="cu-tag round line-brown">拒绝退款</view>
								<view v-if="item.itemList[0].status=='2'" class="cu-tag round line-red">退货退款申请中</view>
								<view v-if="item.itemList[0].status=='21'" class="cu-tag round line-red">同意退货退款/退货中
								</view>
								<view v-if="item.itemList[0].status=='22'" class="cu-tag round line-brown">拒绝退货退款</view>
								<view v-if="item.itemList[0].status=='212'" class="cu-tag round line-brown">收到退货拒绝退款
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="flex justify-end">
					<view class="">
						<view class="margin-top">
							<text>付款金额(元)：</text>
							<text class="text-black text-bold font-36 margin-top-sm">
								{{item.order.paymentPrice? item.order.paymentPrice.toFixed(2):'0.00'}}
							</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="" style="margin-top: 10rpx;">
			<view :class="'cu-load bg-gray1 ' + (loadmore?'loading':'over')" v-if="orderList.length || loadmore"></view>
			<view class="cu-load" v-if="!loadmore && !orderList.length">暂无数据</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	import api from 'utils/api'

	export default {
		name: 'yc-refundLists',
		data() {
			return {
				theme: app.globalData.theme, //全局颜色变量
				CustomBar: this.CustomBar,
				userInfo: {},
				searchParms: {
					page: {
						current: 1,
						size: 10,
					},
					descs: 'create_time',
					isPay: 1,
					status: -2,
					userid: null,
					leaderUserid: null,
				},
				loadmore: false,
				orderList: [],
			}
		},
		onLoad() {
			this.userInfo = uni.getStorageSync('user_info') || {}
			this.searchParms.userid = this.userInfo.id
			this.getData()
		},
		methods: {
			// 查询订单 -- 仅申请退款中
			getData() {
				this.loadmore = true
				api.ycOrderList(this.searchParms).then(res => {
					let orderList = res.data.records;
					this.orderList = [...this.orderList, ...orderList];
					if (orderList.length < this.searchParms.page.size) {
						this.loadmore = false;
					}
				})
			},
			// 跳转订单详情
			jumpInfo(item) {
				uni.navigateTo({
					url: '/pages/order/order-detail/index?id=' + item.id
				})
			},
		}
	}
</script>

<style scoped>
	.order {
		padding: 20rpx 30rpx 0rpx;
		color: #4E5969;
		font-size: 24rpx;
	}

	.order .order_info {
		background-color: #fff;
		padding: 20rpx;
		margin-bottom: 30rpx;
		border-radius: 15rpx;
	}

	.order .order_info:last-child {
		margin-bottom: 0rpx;
	}

	.order .order_info .o_Img {
		width: 200rpx;
		height: 200rpx;
		margin-right: 20rpx;
	}

	.order .order_info .order_item {
		flex: 1;
		width: 0;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.order .order_info .order_item .order_status1 {
		background-image: linear-gradient(#FF7A2F, #FF001F);
		color: #fff;
		display: inline-block;
		padding: 10rpx 20rpx;
		border-radius: 100rpx;
	}

	.order .order_info .order_item .order_status2 {
		background-image: linear-gradient(#D2E1EB, #439AD7);
		color: #fff;
		display: inline-block;
		padding: 10rpx 20rpx;
		border-radius: 100rpx;
	}

	.order .order_info .order_item .order_status3 {
		background-image: linear-gradient(#C1C1C1, #606060);
		color: #fff;
		display: inline-block;
		padding: 10rpx 20rpx;
		border-radius: 100rpx;
	}

	.order .order_info .yBtn {
		background-color: #fff;
		border: 1rpx solid #C9CDD4;
		margin-left: 10rpx;
		padding: 0 10rpx;
		border-radius: 10rpx;
		height: 36rpx;
		line-height: 36rpx;
	}
</style>